<template>
	<div class="buySuccess">
		<div class="logo">
			<div>  
				<i class="iconfont icon-wancheng"></i>
			</div>
			<p>租赁成功</p>
		</div>
		<div class="pay_info">
            <div class="item">
                <p class="text algin_left">订单状态</p>
                <p class="text algin_right">支付成功</p>
            </div>
            <div class="item">
                <p class="text algin_left">订单时间</p>
                <p class="text algin_right">{{ orderData.addTime | numberToAllDate('')}}</p>
            </div>
            <div class="item">
                <p class="text algin_left">支付金额</p>
                <p class="text algin_right" style="font-size:.32rem;font-weight:bold;">￥{{ orderData.totalAmount }}</p>
            </div>
        </div>
        <router-link class="button go-order" tag="div" to="/takeOrder" replace><button type="button">继续点单</button></router-link>
	</div>
</template>

<script type="text/javascript">
export default {
	data(){
		return{
			orderData:{
				addTime:"",
				totalAmount:0,
			},
			btn:false
		}
	},
	mounted(){
		m$.hiddenScroll('.buySuccess'); 
		    setTimeout(function () { 
		    m$.hiddenScroll('.buySuccess'); 
		},10)
		if(this.$route.query){
			console.log("this.$route.query",this.$route.query)
			this.orderData = this.$route.query;
		}
        $(document).ready(()=>{
  			$('.login').height($(window).height());
  		});
  		m$.setTitle('支付成功');
  	}
}
</script>
<style lang="scss" scoped>
	.buySuccess{
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #f4f4f4;
		box-sizing: border-box;
		.logo{
			text-align: center;
			padding-top: .5rem;
			padding-bottom: .5rem;
			background-color: #fff;
			i {
				color:  #71d785;
				font-size: 1.2rem;
			}
			p {
				font-size: .32rem;
				margin-top: .35rem;
			}
		}
		.pay_info{
			// height: calc( 100% - 4.5rem );
			position: relative;
			background-color: #fff;
			.title {
				color: #444;
				height: 1rem;
				line-height: 1rem;
				padding: 0 .2rem;
				font-size: .32rem;
				border-top: .1rem solid #f1efef;
		  	}
			.item {
				display: flex;
				font-size: .28rem;
				height: .4rem;
				line-height: .4rem;
				padding: .32rem .159rem;
				.text {
					flex : 1;
				}
				.algin_right {
					text-align: right;
					color: #333;
					padding-right: .4rem;
				}
				.algin_left {
					color: #999;
					padding-left: .4rem;
				}
	  		}
	  		.notes {
				padding: 0 .5rem;
				max-height: 76px;
				overflow-y: scroll;
	  			p {
					font-size: .28rem;
					line-height: 1.5em;
					color: #666666;
	  			}
	  		}
		}
  		.button{
  			height: .8rem;
  			width: 100%;
  			text-align: center;
  			position: absolute;
  			font-size: 0;
  			button{
  				display: inline-block;
  				border: none;
  				background: none;
  				background-color: #71d785;
  				color: #fff;
  				height: 100%;
  				width: 4.3rem;
  				box-shadow: 0 0 10px 0 #71d685;
  				border-radius: 40px;
  				font-size: .32rem;
  			}
  		}
  		.go-takeOrder{
  			bottom: 2rem;
  		}
  		.go-order{
  			bottom: .8rem;
  		}
	}
</style>
